<template>
  <div class="container">
    <el-row>
      <el-col :span="16">

        <!-- 文章开始 -->

        <!-- 文章结束 -->
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>

    <div class="showbar">
      <div class="cover-image"></div>
      <div class="text" style="text-shadow:1px 1px 1px #000000">
        <h1>简书</h1>
        <h3>交流故事，沟通想法</h3>
        <p>一个基于内容分享的社区</p>
        <a href="#">
          <i class="fa fa-home"></i>提笔写篇文章
        </a>
      </div>
    </div>
    <div class="article-page">
      <nav>
        <span class="nav-text fir">
          <a href="#">发现</a>
        </span>
        <span class="nav-text">
          <router-link :to="{name: 'bonus'}">2015精选</router-link>
        </span>
        <span class="search clearfloat">
          <span class="input">
            <input type="search" placeholder="搜索" />
          </span>
          <span class="search-icon">
            <i class="fa fa-seaSrch"></i>
          </span>
        </span>
      </nav>
      <div class="article-list clearfix">
        <ul class="btn-group">
          <li :class="{active: show === 'hot'}">
            <a v-on:click="displayArticle('hot')">热门</a>
          </li>
          <li :class="{active: show === 'new'}">
            <a v-on:click="displayArticle('new')">新上榜</a>
          </li>
          <li :class="{active: show === 'daily'}">
            <a v-on:click="displayArticle('daily')">日报</a>
          </li>
          <li :class="{active: show === 'weekhot'}">
            <router-link @click="show = 'weekhot'" :to="{name: 'Home'}">七日热门</router-link>
          </li>
          <li :class="{active: show === 'monthhot'}">
            <router-link @click="show = 'monthhot'" :to="{name: 'Home'}">三十日热门</router-link>
          </li>
          <li :class="{active: show === 'reward'}">
            <router-link @click="show = 'reward'" :to="{name: 'Home'}">有奖活动</router-link>
          </li>
          <li :class="{active: show === 'publish'}">
            <router-link @click="show = 'publish'" :to="{name: 'Home'}">简书出版</router-link>
          </li>
          <li :class="{active: show === 'video'}">
            <router-link @click="show = 'vedio'" :to="{name: 'Home'}">简书播客</router-link>
          </li>
          <li :class="{active: show === 'hotnews'}">
            <router-link @click="show = 'hotnews'" :to="{name: 'Home'}">时事热闻</router-link>
          </li>
          <li :class="{active: show === 'choice'}">
            <router-link @click="show = 'choice'" :to="{name: 'Home'}">专题精选</router-link>
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template><script>
import { mapState } from "store";

export default {
  name: `home`,
  data() {
    return {
      items: 4
    };
  },
  computed: mapState({
    show: state => state.Home.show
  }),
  methods: {
    displayArticle: function(str) {
      this.$store.dispatch(`changeShowStatus`, str);
      this.$store.dispatch(`changeArticleList`, str);
    }
  }
};
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.btn-group {
  text-align: left;
  margin-left: 18px;
  margin-top: 20px;
}

.btn-group li {
  margin: 5px 5px;
}

.btn-group .active {
  background-color: #de533a;
}

.btn-group .active a {
  color: #ffffff;
}

.btn-group li {
  margin: 0 5px;
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  cursor: pointer;
}
</style>
